<template>
	<view>
		<!-- <cu-custom bgColor="text-156" :isBack="false">
			<view slot="left" style="margin-left: 10upx;">
				<view @click="showUserInfo">
					<uni-icons type="person-filled" size="20"></uni-icons>
				</view>
			</view>
			<block slot="content">{{pageTitle}}</block>
		</cu-custom> -->
		<uni-nav-bar :fixed="true" color="#156DAC">
			<view class="header-icon-text-panel">
				<text class="title">{{pageTitle}}</text>
				<view style="margin-left: 10upx;" @click="showUserInfo">
					<uni-icons type="person-filled" size="16" color="#156DAC"></uni-icons>
				</view>
			</view>
		</uni-nav-bar>
		<view class="index-content padding-xl">
			<!-- 运维服务 -->
			<template v-if="userRole != '3'">
				<!-- 运维超期提醒 -->
				<view class="card-item">
					<view class="card-title">
						<view class="icon">
							<image class="title-icon" src="../../static/index/warning.png"></image>
						</view>
						<view class="label">运维超期提醒</view>
					</view>
					<view class="card-content">
						<!-- <view class="content-item blue">
							<text>废水提醒——巡检，排放口:化荣食品污水排放口，计划</text>
							<text>于2020-12-12巡检.</text>
							<text class="warning">超期时间10天</text>
						</view> -->
						<view v-for="(item,index) in maintenancerlOverList" :key="item.id" class="content-item blue">
							<!-- <text>{{item.alarmStartTime || '- -'}}</text> -->
							<text>{{'['+item.plansType+'] ' || '- -'}}</text>
							<!-- <text>{{item.name || '- -'}}</text> -->
							<text>{{item.outletName || '- -'}}</text>
							<text>{{item.shortName || '- -'}}</text>
							<text>{{'上一次时间：'+(item.lastActualTime || '- -')}}</text>
							<text>{{'下一次时间：'+(item.planTime || '- -')}}</text>
							<text>{{item.remark || '- -'}}</text>
						</view>
						<view class="text-center" v-if="!pageLoading && maintenancerlOverList.length === 0">
							<text>暂无超期信息</text>
						</view>
					</view>
				</view>
				<!-- 报警信息 -->
				<view class="card-item">
					<view class="card-title">
						<view class="icon">
							<image class="title-icon" src="../../static/index/warning.png"></image>
						</view>
						<view class="label">报警信息</view>
					</view>
					<view class="card-content">
						<view v-for="(item,index) in businessList" :key="item.id" class="content-item red" @click="handleToBusinessDesc(item,'handle')">
							<!-- <text>{{item.alarmStartTime || '- -'}}</text> -->
							<text class="pl10">{{item.alarmInformation || '- -' }}</text>
						</view>
						<view class="text-center" v-if="!pageLoading && businessList.length === 0">
							<text>暂无进行中报警</text>
						</view>
						<!-- <view class="content-item blue">
							<text>2020-11-15 21:48:31</text>
							<text class="pl10">龙鹏羽绒  龙鹏羽绒废水排放口发生离线报警，请及时处理</text>
						</view> -->
					</view>
				</view>
				<!-- 任务信息 -->
				<view class="card-item">
					<view class="card-title">
						<view class="icon">
							<image class="title-icon h" src="../../static/index/evaluate.png"></image>
						</view>
						<view v-if="userRole=== '2'" class="label">待处理任务</view>
						<view v-else class="label">待审核任务</view>
					</view>
					<view class="card-content">
						<view v-for="(item,index) in taskList" :key="item.id" class="content-item blue" @click="handleToTaskDetail(item)">
							<!-- <text>2020-11-15 21:48:31</text> -->
							<text class="pl10">{{item.taskName}}</text>
						</view>
						<view class="text-center" v-if="!pageLoading && taskList.length === 0">
							<text>暂无任务信息</text>
						</view>
						<!-- <view class="content-item blue">
							<text>2020-11-15 21:48:31</text>
							<text class="pl10">龙鹏羽绒  龙鹏羽绒废水排放口发生离线报警，请及时处理</text>
						</view> -->
					</view>
				</view>
				<view class="menu-panel col4">
					<!-- row1 -->
					<view class="menu-item" @click="gotoPage('realTime')">
						<view class="menu-icon">
							<image src="../../static/index/menu_ssyl.png" class="menu-img"></image>
						</view>
						<view class="menu-label">实时一览</view>
					</view>
					<view class="menu-item" @click="gotoPage('query')">
						<view class="menu-icon">
							<image src="../../static/index/sjcx.png" class="menu-img"></image>
						</view>
						<view class="menu-label">数据查询</view>
					</view>
					<!-- row2 -->
					<view class="menu-item" @click="gotoPage('police')">
						<view class="menu-icon">
							<image src="../../static/index/bjgl.png" class="menu-img"></image>
						</view>
						<view class="menu-label">报警管理</view>
					</view>
					<view class="menu-item" @click="gotoPage('taskList','task')">
						<view class="menu-icon">
							<image src="../../static/index/menu_rw.png" class="menu-img"></image>
						</view>
						<view class="menu-label">任务管理</view>
					</view>
					<!-- <view class="menu-item" @click="gotoPage('customerList','adminPages/customer')">
						<view class="menu-icon"><image src="../../static/index/menu_khcx.png" class="menu-img"></image></view>
						<view class="menu-label">客户查询</view>
					</view> -->
					<!-- row3 -->
					<view class="menu-item" @click="gotoPage('devops')">
						<view class="menu-icon">
							<image src="../../static/index/ywgl.png" class="menu-img"></image>
						</view>
						<view class="menu-label">运维管理</view>
					</view>
					<view class="menu-item" @click="gotoPage('outletList','adminPages/outlet')">
						<view class="menu-icon">
							<image src="../../static/index/menu_pkgl.png" class="menu-img"></image>
						</view>
						<view class="menu-label">排口管理</view>
					</view>
					<view class="menu-item" @click="gotoPage('resources')">
						<view class="menu-icon">
							<image src="../../static/index/menu_zy.png" class="menu-img"></image>
						</view>
						<view class="menu-label">资源管理</view>
					</view>
					<!-- <view class="menu-item" v-if="userRole!== '2'" @click="gotoPage('personnelEvaluation')">
						<view class="menu-icon">
							<image src="../../static/index/menu_rykp.png" class="menu-img"></image>
						</view>
						<view class="menu-label">人员考评</view>
					</view> -->
					<!-- row4 -->
					<view class="menu-item" @click="gotoPage('evaluation','adminPages')">
						<view class="menu-icon">
							<image src="../../static/index/menu_pjcx.png" class="menu-img"></image>
						</view>
						<view class="menu-label">评价查询</view>
					</view>
					<!-- <view class="menu-item" @click="gotoPage('history')">
						<view class="menu-icon">
							<image src="../../static/index/lsxx.png" class="menu-img"></image>
						</view>
						<view class="menu-label">历史消息</view>
					</view> -->
					<view class="menu-item" @click="gotoPage('clockin','adminPages/clock')">
						<view class="menu-icon">
							<image src="../../static/index/menu_ywdk.png" class="menu-img"></image>
						</view>
						<view class="menu-label">运维打卡</view>
					</view>
					<view class="menu-item" @click="gotoPage('password')">
						<view class="menu-icon">
							<image src="../../static/index/xgmm.png" class="menu-img"></image>
						</view>
						<view class="menu-label">修改密码</view>
					</view>
				</view>
			</template>
			<!-- 客户系统 -->
			<template v-else>
				<!-- 1 -->
				<view class="card-item">
					<view class="card-title">
						<view class="icon">
							<image class="title-icon" src="../../static/index/warning.png"></image>
						</view>
						<view class="label">报警信息</view>
					</view>
					<view class="card-content">
						<view v-for="(item,index) in businessList" :key="item.id" class="content-item blue" @click="handleToBusinessDesc(item,'detail')">
							<!-- <text>{{item.alarmStartTime || '- -'}}</text> -->
							<text class="pl10">{{item.alarmInformation || '- -' }}</text>
						</view>
						<view class="text-center" v-if="!pageLoading && businessList.length === 0">
							<text>暂无正在进行中报警</text>
						</view>
					</view>
				</view>
				<!-- 2 -->
				<view class="card-item">
					<view class="card-title">
						<view class="icon">
							<image class="title-icon h" src="../../static/index/evaluate.png"></image>
						</view>
						<view class="label">运维评价</view>
					</view>
					<view class="card-content">
						<view v-for="(item,index) in maintenancerlList" class="content-item" :key="item.id">
							<text>{{item.maintenanceUsername}}在{{item.fillingFormTime}} 提交了运维单，请您在运维管理进行确认。</text>
						</view>
						<view class="text-center" v-if="!pageLoading && maintenancerlList.length === 0">
							<text>暂无信息</text>
						</view>
					</view>
				</view>
				<!-- 3 -->
				<view class="card-item">
					<view class="card-title">
						<view class="icon">
							<image class="title-icon" src="../../static/index/evaluate.png"></image>
						</view>
						<view class="label">打卡消息</view>
						<view style="color: red;float: right;"  @click="gotoPage('clockinLog','adminPages/clock')">更多>></view>
					</view>
					<view class="card-content">
						<view v-for="(item,index) in clockList" class="content-item" :key="item.id">
							<text>{{item.engineerName}}在{{item.startTime}} 至 {{item.endTime||'未结束'}} ，进行{{item.objective}} 任务。</text>
						</view>
						<view class="text-center" v-if="!pageLoading && clockList.length === 0">
							<text>暂无信息</text>
						</view>
					</view>
				</view>
				<!-- 4 -->
				<view class="menu-panel col4">
					<view class="menu-item" @click="gotoPage('devops')">
						<view class="menu-icon">
							<image src="../../static/index/ywgl.png" class="menu-img"></image>
						</view>
						<view class="menu-label">运维管理</view>
					</view>
					<view class="menu-item" @click="gotoPage('police')">
						<view class="menu-icon">
							<image src="../../static/index/bjgl.png" class="menu-img"></image>
						</view>
						<view class="menu-label">报警管理</view>
					</view>
					<view class="menu-item" @click="gotoPage('query')">
						<view class="menu-icon">
							<image src="../../static/index/sjcx.png" class="menu-img"></image>
						</view>
						<view class="menu-label">数据查询</view>
					</view>
					<!-- <view class="menu-item" @click="gotoPage('history')">
						<view class="menu-icon">
							<image src="../../static/index/lsxx.png" class="menu-img"></image>
						</view>
						<view class="menu-label">历史消息</view>
					</view> -->
					<view class="menu-item" @click="gotoPage('password')">
						<view class="menu-icon">
							<image src="../../static/index/xgmm.png" class="menu-img"></image>
						</view>
						<view class="menu-label">修改密码</view>
					</view>
					<view class="menu-item" @click="gotoPage('chart')">
						<view class="menu-icon">
							<image src="../../static/index/ywyb.png" class="menu-img"></image>
						</view>
						<view class="menu-label">运维月报</view>
					</view>
				</view>
				<!-- 浮动 5 -->
				<view class="float-btn" @click="freeTell">
					<image src="../../static/index/tel.png" class="tel" mode=""></image>
					<text class="label">故障报修</text>
				</view>
			</template>
		</view>
		<!-- 用户中心 右侧抽屉 -->
		<uniDrawer ref="userInfo" :mask="true" mode='right'>
			<view style="height: 90upx;">&nbsp;</view>
			<view class="draw-panel">
				<view class="operation-panel">
					<view class="item-card">
						<view class="card-title">
							<uni-icons class="icon left" type="bars" size="20" color="#156dac"></uni-icons>
							<text class="content">用户信息</text>
							<uni-icons class="icon right" type="arrowdown" size="16" color="#666"></uni-icons>
						</view>
						<view class="card-content">
							<view>用户名: {{realName}}</view>
						</view>
						<view class="card-content">
							<view>签名设置: <text class="operation" @click="operation">操作</text></view>
						</view>
					</view>
				</view>
				<view class="bottom-panel">
					<view class="item-btn lp" @click="handleExit"><text>退出登录</text></view>
				</view>
			</view>
		</uniDrawer>
		<!-- 提示框 -->
		<uni-popup id="popupDialog" ref="popupDialog" type="dialog">
			<uni-popup-dialog type="warning" title="提示" content="确认退出当前用户" :before-close="true" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<ourLoading isFullScreen color="#156dac" :active="pageLoading" />

		<!-- 模态框 -->
		<view class="model" v-if="isShowModel">
			<image :src="imgUrl"></image>
			<!-- <image src="../../static/index/17.jpeg" class="image"></image> -->
			<view class="model_btn">

				<button type="primary" size="mini" @click="modify">修改</button>
				<button type="primary" @click="isShowModel=false" size="mini">关闭</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-popup-dialog/uni-popup-dialog.vue';
	import ourLoading from '@/components/our-loading/our-loading.vue'
	import {
		parseTime,
		getRolePermiss
	} from '@/common/util.js'
	import {
		dictTokenKey,
		dictTokenTime
	} from '@/common/dict.js'
	// 预警
	const getBussinessUrl = '/business/alarm/getAllAlarm'
	// 运维
	const getMaintenancerlUrl = '/business/maintenance/selectMaintenanceList'
	// 运维超期
	const getMaintenancerlOverUrl = '/base/message/listPage'
	const getMaintenancerlOverUrl2 = '/base/t-maintenance-plans/getOverduePage'
	//任务
	const getTaskUrl = '/business/task/listPage'
	//打卡
	const getClockUrl = '/system/clock/listPage'
	const readTree = '/business/task/read'
	// 缓存字典


	export default {
		components: {
			ourLoading,
			uniNavBar,
			uniDrawer,
			uniIcons,
			uniPopup,
			uniPopupDialog
		},
		data() {
			return {
				userRole: 'user',
				pageTitle: '客户服务系统',
				popupShow: false,
				isShowModel: false,
				username: '',
				realName: '',
				pageLoading: false,
				businessList: [],
				maintenancerlList: [],
				clockList: [],
				maintenancerlOverList: [],
				taskList: [],
				imgUrl: '',
				query: {
					startDate: null,
					endDate: null
				}
			}
		},
		onLoad() {
			let stime = new Date()
			this.query.endDate = parseTime(stime, '{y}-{m}-{d}')
			const etime = stime.setMonth(stime.getMonth() - 1);
			this.query.startDate = parseTime(etime, '{y}-{m}-{d}')
			// 判断用户是否登录
			this.username = uni.getStorageSync('USER_USERNAME')
			this.realName = uni.getStorageSync('USER_REALNAME')
			const role = uni.getStorageSync('USER_ROLE')
			this.userRole = getRolePermiss(role)
			this.pageTitle = this.userRole != '3' ? '运维服务系统' : '客户服务系统'

			if (!uni.getStorageSync('USER_TOKEN')) {
				uni.reLaunch({
					url: '/pages/login/login?exit=2'
				})
				return false;
			}
			// 初始化
			this.initIndex()
			this.usersInfoChange()
			//初始化字典
			this.initCacheDict()
		},
		methods: {
			initCacheDict() {
				const dictCacheTime = dictTokenTime
				const dictCacheKey = dictTokenKey
				const time = uni.getStorageSync(dictCacheTime)
				const now = new Date().getTime()
				if ((now - time) > 1000 * 60) {
					this.$api.request('/base/code/list', {
						method: 'get',
					}).then((res) => {
						if (res.success) {
							const data = res.data
							if (data.list && data.list.length > 0) {
								const dictObj = {}
								data.list.forEach(item => {
									dictObj[item.codeType] = item.tcodes
								})
								// console.log('字典缓存')
								uni.setStorageSync(dictCacheKey, JSON.stringify(dictObj))
								uni.setStorageSync(dictCacheTime, now)
							}
						}
					})
				}

			},
			initIndex() {
				// 根据角色查询不同的接口
				let queryArray = []
				const bus = this.businessPromise();
				const mai = this.maintenancerlPromise();
				const ovr = this.getMaintenancerlOver()
				this.pageLoading = true

				this.getClock().then(res => {
					if (res.success) {
						this.clockList = res.data.list
					}
				})
				this.getTask().then(res => {
					if (res.success) {
						this.taskList = res.data.list
					}
				})
				Promise.all([bus, mai, ovr]).then(result => {
					// console.log(result)
					this.pageLoading = false
					// 报警
					const business = result[0]
					if (business.success) {
						this.businessList = business.data.rows || [];
					} else {
						this.businessList = []
					}
					const maintenancerl = result[1]
					if (maintenancerl.success) {
						this.maintenancerlList = maintenancerl.data.page.records || [];
					} else {
						this.maintenancerlList = []
					}
					// console.log(maintenancerlList)
					// 运维超期
					const maintenancerlOver = result[2]
					if (maintenancerlOver.success) {
						const list = maintenancerlOver.data.row.records
						list.forEach(item => {
							item.lastActualTime = parseTime(item.lastActualTime, '{y}-{m}-{d}')
							item.planTime = parseTime(item.planTime, '{y}-{m}-{d}')
						})
						this.maintenancerlOverList = list
					}


				}).catch((e) => {
					this.pageLoading = false
				})
			},
			// 任务消息
			getTask() {
				return new Promise((resolve, reject) => {
					var taskStatus = 'e009_00,e009_01'
					if (this.userRole !== '2') {
						taskStatus = 'e009_02'
					}
					this.$api.request(getTaskUrl, {
						method: 'get',
						data: {
							page: 1,
							limit: 3,
							taskStatus: taskStatus,
						}
					}).then(res => {
						if (res.success) {
							resolve(res)
						} else {
							reject(res)
						}
					}).catch((e) => {
						reject('网络异常,请稍后再试')
					})
				})
			},

			// 操作
			operation() {
				const user = uni.getStorageSync('USER_INFO');
				console.log(user.signPath)
				if (!user.signPath) {
					let url = `/pages/resources1/resources1`
					uni.navigateTo({
						url
					})
				} else {
					let filePath = 'https://www.cdlepan.com:7443'
					this.imgUrl = filePath + user.signPath
					this.isShowModel = true
				}
			},

			// 修改
			modify() {
				let url = `/pages/resources1/resources1`
				uni.navigateTo({
					url
				})
			},

			// 运维超期提醒
			getMaintenancerlOver() {
				return new Promise((resolve, reject) => {
					this.$api.request(getMaintenancerlOverUrl2, {
						method: 'get',
						data: {
							page: 1,
							limit: 3
						}
					}).then(res => {
						if (res.success) {
							resolve(res)
						} else {
							reject(res)
						}
					}).catch((e) => {
						reject('网络异常,请稍后再试')
					})
				})
			},
			// 运维
			maintenancerlPromise() {
				return new Promise((resolve, reject) => {
					this.$api.request(getMaintenancerlUrl, {
						method: 'get',
						data: {
							page: 1,
							limit: 3,
							confirmed: 'e017_01',
							...this.query,
						}
					}).then(res => {
						if (res.success) {
							resolve(res)
						} else {
							reject(res)
						}
					}).catch((e) => {
						reject('网络异常,请稍后再试')
					})
				})
			},
			// 打卡信息
			getClock() {
				return new Promise((resolve, reject) => {
					this.$api.request(getClockUrl, {
						method: 'get',
						data: {
							page: 1,
							limit: 3
						}
					}).then(res => {
						if (res.success) {
							resolve(res)
						} else {
							reject(res)
						}
					}).catch((e) => {
						reject('网络异常,请稍后再试')
					})
				})
			},
			// 返回promise 统一处理 方便加载效果
			businessPromise() {
				return new Promise((resolve, reject) => {
					this.$api.request(getBussinessUrl, {
						method: 'get',
						data: {
							page: 1,
							limit: 3
						}
					}).then(res => {
						if (res.success) {
							resolve(res)
						} else {
							reject(res)
						}
					}).catch((e) => {
						reject('网络异常,请稍后再试')
					})
				})
			},
			initBusinessList() {
				this.pageLoading = true
				this.$api.request(getBussinessUrl, {
					method: 'get',
					data: {
						type: 1,
						page: 1,
						limit: 3
					}
				}).then(res => {
					this.pageLoading = false
					if (res.success) {
						this.businessList = res.data.rows || [];
					}
				}).catch(() => {
					this.pageLoading = true
				})
			},
			handleToTaskDetail(item) {
				const type = this.userRole == '1' ? 'check' : 'apply'
				const user = uni.getStorageSync('USER_INFO');
				const {
					id
				} = item
				if (item != null && item.taskStatus === 'e009_00' && item.responsibleId === user.id) {
					this.$api.request(readTree, {
						method: 'put',
						data: {
							id: id
						}
					})
					item.taskStatus = 'e009_01'
				}
				// alert(contentDescription)
				uni.navigateTo({
					url: `/pages/task/taskAdd/taskAdd?type=${type}&id=${id}`,
					success: (res) => {
						let temp = JSON.parse(JSON.stringify(item))
						if (temp.helperId) {
							const ids = temp.helperId.split(",")
							temp.helperId = ids
						}
						res.eventChannel.emit('taskDetail', {
							data: temp
						})
					}
				})
			},
			handleToBusinessDesc(row, detail) {
				// console.log(row)
				uni.navigateTo({
					// url:`/pages/form/businessDetail/businessDetail?id=${row.id}&type=`+detail, 
					url: `/pages/police/police`,
				})
			},
			gotoPage(page, before) {
				let url = `/pages/${page}/${page}`
				if (before) {
					url = `/pages/${before}/${page}/${page}`
				}
				uni.navigateTo({
					url
				})
			},
			/* 判断用户是过期 */
			usersInfoChange() {

			},
			showUserInfo() {
				this.$refs.userInfo.open()
			},
			dialogConfirm(done) {
				done()
				uni.clearStorageSync('USER_TOKEN')
				uni.clearStorageSync('USER_ROLE')
				uni.reLaunch({
					url: '/pages/login/login?exit=1'
				})

			},
			dialogClose(done) {
				done()
			},
			handleExit() {
				this.$refs.userInfo.close()
				this.$refs.popupDialog.open()
			},
			freeTell() {
				wx.makePhoneCall({
					phoneNumber: '18011528851',
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.index-content {
		padding: 30upx 0;
		background-color: #F3F3F3;
		margin-top: var(--status-bar-height);
	}

	.model {
		height: 100%;
		width: 100%;
		background: #eee;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		// opacity: 0.9;
		padding: 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.image {
			width: 100%;
			height: 90%;
		}

		.model_btn {
			text-align: right;

			button {
				margin-left: 15px;
			}
		}
	}

	.float-btn {
		position: fixed;
		right: 2%;
		bottom: 20%;
		background: url(../../static/index/float.png) no-repeat;
		background-size: 100% 100%;
		width: 150upx;
		height: 150upx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.tel {
			height: 40upx;
			width: 40upx;
		}

		.label {
			font-size: 8upx;
			color: #fff;
		}
	}

	.menu-panel {
		width: 690upx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		background-color: #fff;
		padding: 40upx 20upx 20upx 80upx;
		margin: 20upx auto 0;

		&.col4 {
			.menu-item {
				flex: 0 0 25%;
			}
		}

		.menu-item {
			flex: 0 0 33%;
			display: flex;
			flex-wrap: wrap;
			// flex-direction: column;
			// align-items: center;
			height: 165upx;

			.menu-icon {
				width: 85upx;
				height: 85upx;

				.menu-img {
					width: 85upx;
					height: 85upx;
				}
			}

			.menu-label {
				color: #000;
				font-size: 22upx;
				margin-top: 12upx;
			}
		}
	}

	.operation {
		color: #fff;
		background: #409eff;
		width: 80px;
		height: 22px;
		display: inline-block;
		text-align: center;
		margin-left: 5px;
		font-size: 12px;
		line-height: 22px;
		border-radius: 5px;
	}

	.card-item {
		background-color: #FFFFFF;
		width: 690upx;
		margin: 0 auto 20upx;
		border-radius: 10upx;
		padding: 0upx 20upx 20upx 20upx;

		.card-content {
			margin-top: 20upx;
			background-color: #f3f3f3;
			padding: 20upx;
			font-size: 24upx;

			.content-item {
				line-height: 40upx;
				font-weight: 400;
				color: #333;

				&:not(:last-child) {
					margin-bottom: 25upx;
				}

				&.blue {
					color: #1B76FF;
				}

				&.red {
					color: red;
				}

				.pl10 {
					padding-left: 10upx;
				}
			}

			.warning {
				color: #F61D1D;
			}
		}

		.card-title {
			display: flex;
			height: 70upx;
			line-height: 70upx;
			align-items: center;
			border-bottom: 1px dashed #333;

			.icon {
				flex: 0 0 30upx;
				display: flex;
				align-items: center;

				.title-icon {
					width: 35upx;
					height: 35upx;

					&.h {
						height: 40upx;
					}
				}
			}

			.label {
				flex: 1;
				padding-left: 25upx;
				font-weight: 500;
				font-size: 28upx;
			}
		}
	}
</style>
